
Vue.component('message',{

    //定义接收的属性
    props:['title','body'],

    data() {

        return {
            isVisible:true
        }



    },

    //vue语法需要在一个可识别的root node里面执行,所以需要包一层 div
    template: `

  <article class="message" v-show="isVisible">
    <div class="message-header">
      <p>{{ title }} </p>
      <button class="delete" aria-label="delete" @click="isVisible=false"></button>
    </div>
    <div class="message-body">
    {{ body }}
    </div>
  </article>

`


});



new Vue({

    el:'#root',


});








